import { useState, useEffect } from "react";
import { Image } from "antd";
import "@/styles/productDetails.css";

import BANNER5 from "assets/banner5.jpg";
import WQPL02 from "assets/02_wqpl.jpg";

import { getAboutUs, detailProduct } from "@/utils/request/index";

function productDetails() {
  const [aboutData, setAboutData] = useState({
    category: [],
    description: {
      content: "",
      title: "",
    },
    mainImg: "",
  });

  function loadGetAboutUs() {
    getAboutUs().then((res) => {
      setAboutData({
        category: res.category,
        description: res.description,
        mainImg: res.mainImg,
      });
    });
  }

  const [goodsDetail, setGoodsDetail] = useState({
    describe: "",
    pic: "",
    price: 0,
    pname: "",
    title: "",
  });
  function loadDetailProduct() {
    detailProduct().then((res) => {
      setGoodsDetail(res);
    });
  }

  useEffect(() => {
    loadGetAboutUs();
    loadDetailProduct();
  }, []);

  return (
    <>
      <div id="bannerShow">
        <a href="#">
          <Image src={BANNER5} alt="" />
        </a>
      </div>
      <div id="breadcrumb">
        <div className="container">
          <a href="index">首页</a>
          <span> >> </span>
          <a href="productList">产品展示</a>
        </div>
      </div>
      <div id="select" className="container">
        <div className="title">
          <h1 className="chinese">产品展示</h1>
        </div>
        <div className="content clearfix">
          <div className="list">
            {aboutData.category.map((item, index) => {
              return (
                <a href="#" key={index}>
                  {item.label}
                </a>
              );
            })}
            <Image src={goodsDetail.pic} alt="wqpl" />
          </div>
          <div className="productDetails right">
            <div className="price clearfix">
              <Image className="fl" src={goodsDetail.pic} alt="pro01" />
              <div className="information fl">
                <h2>{goodsDetail.title}</h2>
                <div>
                  价格:{" "}
                  <span className="tsize20px">
                    {goodsDetail.price.toFixed(2)}
                  </span>
                </div>
              </div>
            </div>
            <div className="pname">{goodsDetail.pname}</div>
            <p>{goodsDetail.describe}</p>
            <a>
              上一个：<span>无</span>
            </a>
            <a>
              下一个：<span> 全悦18框实木照片墙创意相片墙</span>
            </a>
          </div>
        </div>
      </div>
    </>
  );
}

export default productDetails;
